<template>
  <div>
    <!-- 上半部分信息 -->
    <Card>
      <Tabs type="card">
        <!-- <TabPane :label="'保单：' + contdetail.appntno"></TabPane> -->
        <TabPane label="保单信息">
          <div style="display: flex;">
            <span class="line1">
            </span>
            <span class="title">基本信息</span>
          </div>
          <Form label-position="left" style="display: block;margin-left: 16px;margin-top:20px" class="form-self">
            <span class="title" style="font-size: 16px;margin-left:0">续期专员信息</span>
            <!-- <span v-if="basicInformation1.agentstate" class="tab-item"
          :style="{'background': 'rgba(20,213,149,0.15)','color': basicInformation1.agentstate ==  '01' || basicInformation1.agentstate=='02'
            ? '#14D595' : '#999' }">{{basicInformation1.agentstate ==  '01' || basicInformation1.agentstate=='02' ? '在职' : '离职'}}</span> -->
            <span v-if="basicInformation1.agentstate">
              <span v-if="basicInformation1.agentstate == '01' || basicInformation1.agentstate == '02'" class="tab-item"
                style="background:rgba(20,213,149,0.15);color:#14D595">在职</span>
              <span v-else class="tab-item" style="background:#F7F7F7;color:#999">离职</span>
            </span>
            <!-- <span class="tab-item" style="background: #eeeeee; color: #999999;">离职</span> -->

            <Row gutter="10" style="margin-top:0px">
              <i-col span="6">
                <FormItem label="专员：">
                  <span>{{ basicInformation1.name }}-{{ basicInformation1.reagentcode }}</span>
                </FormItem>
              </i-col>
              <i-col span="6">
                <FormItem label="职级：">
                  <span>{{ basicInformation1.agentgradename }}</span>
                </FormItem>
              </i-col>
              <i-col span="6">
                <FormItem label="所属机构：">
                  <span v-if="basicInformation1.managecom">{{ basicInformation1.managecom }}-{{
                    basicInformation1.managecomname }}</span>
                </FormItem>
              </i-col>
              <i-col span="6">
                <FormItem label="联系电话：">
                  <span>{{ basicInformation1.mobile }}</span>
                </FormItem>
              </i-col>
            </Row>

            <span class="title" style="font-size: 16px;margin-left:0">业务员信息</span>
            <!-- <span v-if="basicInformation.agentdetail.agentstate" class="tab-item"
          :style="{'background': 'rgba(20,213,149,0.15)','color': basicInformation.agentdetail.agentstate ==  '01' || basicInformation.agentdetail.agentstate=='02'
            ? '#14D595' : '#999' }">{{basicInformation.agentdetail.agentstate ==  '01' || basicInformation.agentdetail.agentstate=='02' ? '在职' : '离职'}}</span> -->
            <span v-if="basicInformation.agentdetail.agentstate">
              <span
                v-if="basicInformation.agentdetail.agentstate == '01' || basicInformation.agentdetail.agentstate == '02'"
                class="tab-item" style="background:rgba(20,213,149,0.15);color:#14D595">在职</span>
              <span v-else class="tab-item" style="background:#F7F7F7;color:#999">离职</span>
            </span>
            <Row gutter="10" style="margin-top:0px">
              <i-col span="6">
                <FormItem label="业务员：">
                  <!-- <span>{{ basicInformation.agentdetail.agentName }}</span> -->
                  <span>
                    {{ basicInformation.agentdetail && basicInformation.agentdetail.name ?
                      basicInformation.agentdetail.name +
                      ' - ' : '' }}
                    {{ basicInformation.agentdetail &&
                      basicInformation.agentdetail.agentcode ? basicInformation.agentdetail.agentcode : '' }}
                  </span>
                </FormItem>
              </i-col>
              <i-col span="6">
                <FormItem label="所属机构：">
                  <span>
                    <!-- {{ basicInformation.agentdetail.managecom }} -->
                    {{ basicInformation.agentdetail &&
                      basicInformation.agentdetail.managecomname ? basicInformation.agentdetail.managecomname + ' - ' : ''
                    }}
                    {{ basicInformation.agentdetail &&
                      basicInformation.agentdetail.managecom ? basicInformation.agentdetail.managecom : '' }}
                  </span>
                </FormItem>
              </i-col>
              <i-col span="6">
                <FormItem label="联系电话：">
                  <span>{{ basicInformation.agentdetail.mobile }}</span>
                </FormItem>
              </i-col>
              <i-col span="6">
                <FormItem label="渠道：">
                  <span>{{ basicInformation.agentdetail.branchTypeName }}</span>
                </FormItem>
              </i-col>
            </Row>

            <span class="title" style="font-size: 16px;margin-left:0">保单信息</span>
            <Row gutter="10" style="margin-top:0px">
              <i-col span="6">
                <FormItem label="保单标志：">
                  <span>{{ basicInformation.contdetail.contflagname }}</span>
                </FormItem>
              </i-col>
              <i-col span="6">
                <FormItem label="应交交次：">
                  <!-- <span>{{ basicInformation.contdetail.payCount }}</span> -->
                  {{ basicInformation.contdetail ? basicInformation.contdetail.payyear + "/" : '' }}
                  {{ basicInformation.contdetail ? basicInformation.contdetail.payyears : '' }}
                  {{ basicInformation.contdetail ? basicInformation.contdetail.payintvname : '' }}
                </FormItem>
              </i-col>
              <i-col span="6">
                <FormItem label="应交日：">
                  <span>{{ basicInformation.contdetail.paytodate ? basicInformation.contdetail.paytodate.substr(0, 10) :
                    ''
                  }}</span>
                </FormItem>
              </i-col>
              <i-col span="6">
                <FormItem label="应交保费：">
                  <span>{{ basicInformation.contdetail.paymoney }}元</span>
                </FormItem>
              </i-col>
              <i-col span="6">
                <FormItem label="交费难度：">
                  <span @click="showDialog" style="cursor: pointer;">{{ basicInformation.contdetail.difficulty }}</span>
                </FormItem>
              </i-col>
              <i-col span="6">
                <FormItem label="主险：">
                  <span>{{ basicInformation.contdetail.mainriskname }}</span>
                </FormItem>
              </i-col>
              <i-col span="6">
                <FormItem label="主险保费：">
                  <span>{{ basicInformation.contdetail.mainpolpaymoney }}元</span>
                </FormItem>
              </i-col>
              <i-col span="6">
                <FormItem label="附险：">
                  <div v-if="subRisks" style="margin-left: 54px;" v-html="subRisks">{{ subRisks }}</div>
                  <span v-else>-</span>
                </FormItem>
              </i-col>
              <i-col span="6">
                <FormItem label="附险保费：">
                  <span v-if="basicInformation.contdetail.totalsubpolmoney">{{
                    basicInformation.contdetail.totalsubpolmoney
                  }}元</span>
                  <span v-else>-</span>
                </FormItem>
              </i-col>
            </Row>

            <span class="title" style="font-size: 16px;margin-left:0">投/被保人信息</span>
            <Row gutter="10" style="margin-top:0px">
              <i-col span="6">
                <FormItem label="投保人：">
                  <span>{{ basicInformation.customerdetail.appntname }}</span>
                </FormItem>
              </i-col>
              <i-col span="6">
                <FormItem label="投保人性别：">
                  <span>{{ basicInformation.customerdetail.appntsexname }}</span>
                </FormItem>
              </i-col>
              <i-col span="6">
                <FormItem label="被保人：">
                  <span>{{ basicInformation.customerdetail.insuredname }}</span>
                </FormItem>
              </i-col>
              <i-col span="6">
                <FormItem label="被保人性别：">
                  <span>{{ basicInformation.customerdetail.insuredsexname }}</span>
                </FormItem>
              </i-col>
              <i-col span="6">
                <FormItem label="关系：">
                  <span>{{ basicInformation.customerdetail.relation }}</span>
                </FormItem>
              </i-col>
              <i-col span="6">
                <FormItem label="投保人电话：">
                  <span>{{ basicInformation.customerdetail.appntphone }}</span>
                </FormItem>
              </i-col>
              <i-col span="6">
                <FormItem label="被保人电话：">
                  <span>{{ basicInformation.customerdetail.insuredphone }}</span>
                </FormItem>
              </i-col>
              <i-col span="6">
                <FormItem label="银行：">
                  <span>{{ basicInformation.customerdetail.bankname }}</span>
                </FormItem>
              </i-col>
              <i-col span="6">
                <FormItem label="银行卡号：">
                  <span>{{ basicInformation.customerdetail.bankaccno }}</span>
                </FormItem>
              </i-col>
              <i-col span="18">
                <FormItem label="联系地址：">
                  <span>{{ basicInformation.customerdetail.appntpostaladdress }}</span>
                </FormItem>
              </i-col>
            </Row>
          </Form>

          <Card style="margin-top:20px">
            <div class="header1">
              <div style="display: flex;">
                <span class="line1">
                </span>
                <span class="title">历史工作记录</span>
              </div>
              <Button type="primary" @click="reset(), doworkModal = true">
                添加服务记录
              </Button>
            </div>

            <Modal v-model="doworkModal" title="添加服务记录" width="750" :mask-closable="false">
              <Form label-position="right" label-width="130" style="display: block;">
                <Row gutter="10">
                  <i-col span="12">
                    <FormItem label="工作日期">
                      <DatePicker v-model="form1.planDate" @on-change="val => $set(form1, 'planDate', val)"
                        format="yyyy-MM-dd" type="date" placeholder="选择工作日期" />
                    </FormItem>
                  </i-col>
                  <i-col span="12">
                    <FormItem label="工作方式">
                      <Select v-model="form1.workType">
                        <Option v-for="item in listWorkType" :key="item.key" :value="item.key">{{ item.value }}</Option>
                      </Select>
                    </FormItem>
                  </i-col>
                  <i-col span="24">
                    <FormItem label="客户意愿">
                      <RadioGroup v-model="form1.customerWish">
                        <Radio label="1">宽限期交费</Radio>
                        <Radio label="2" style="margin:0 20px">打算退保</Radio>
                        <Radio label="3">打算失效</Radio>
                      </RadioGroup>
                    </FormItem>
                  </i-col>
                  <i-col span="24">
                    <FormItem label="拜访记录">
                      <Input v-model="form1.workresult" type="textarea" :rows="2" placeholder="请输入" show-word-limit
                        maxlength="100" clearable />
                    </FormItem>
                  </i-col>
                  <i-col v-if="form1.customerWish != 1" span="24">
                    <FormItem label="未收原因说明">
                      <CheckboxGroup v-model="form1.reasonByCustomer" @on-change="reasonByCustomerChange"
                        class="cb-group">
                        <Checkbox label="1" border>暂时经济困难</Checkbox>
                        <Checkbox label="2" border>家庭问题</Checkbox>
                        <Checkbox label="3" border>理赔不满意</Checkbox>
                        <Checkbox label="4" border>产品不理想</Checkbox>
                        <Checkbox label="5" border>不满意业务员</Checkbox>
                        <Checkbox label="6" border>服务不满意</Checkbox>
                        <Checkbox label="7" border>业务员投保</Checkbox>
                        <Checkbox label="8" border>同业竞争</Checkbox>
                        <Checkbox label="9" border>单位投保</Checkbox>
                        <Checkbox label="10" border>对公司不信任</Checkbox>
                        <Checkbox label="11" border>社保冲击</Checkbox>
                        <div style="display: flex;margin-left: 5px;">
                          <Checkbox label="99" border style="min-width: 113px;">其它原因</Checkbox>
                          <Input v-model.trim="form1.reasonByother" :disabled="!form1.reasonByCustomer.includes('99')"
                            type="textarea" maxlength="100" show-word-limit clearable placeholder="请输入"
                            style="margin-right: 5px;" />
                        </div>
                      </CheckboxGroup>
                    </FormItem>
                  </i-col>
                  <i-col v-if="form1.customerWish != 1" span="24">
                    <!--  style="margin-left:20px" -->
                    <FormItem label="保单效力中止后，是否有复效打算" label-width="227">
                      <RadioGroup v-model="form1.reinstate" @on-change="$set(form1, 'reinstateDate', '')">
                        <Radio label="1">复效</Radio>
                        <!--  -->
                        <DatePicker v-model="form1.reinstateDate" @on-change="val => $set(form1, 'reinstateDate', val)"
                          :disabled="form1.reinstate != '1'" format="yyyy-MM-dd" type="date" placeholder="选择工作日期" />
                        <Radio label="2" style="margin:0 20px">不确定</Radio>
                        <Radio label="3">退保</Radio>
                      </RadioGroup>
                    </FormItem>
                  </i-col>
                  <i-col span="24">
                    <FormItem label="联系电话是否更新">
                      <Input v-model="form1.phone" placeholder="请输入" />
                    </FormItem>
                  </i-col>
                  <i-col span="24">
                    <!-- appntNo 投保人编号，必传，在上面基础信息直接取 -->
                    <!-- addressNo 投保人地址编号，必传，在上面基础信息直接取 -->
                    <!-- workid 本次的工作id，必填，从上面基础信息直接取 -->
                    <FormItem label="联系地址是否更新">
                      <Input v-model.trim="form1.customerAddress" type="textarea" maxlength="50" show-word-limit clearable
                        placeholder="请输入新地址" />
                    </FormItem>
                  </i-col>
                  <i-col span="11">
                    <FormItem label="下次工作再计划">
                      <!--  -->
                      <DatePicker v-model="form1.nextPlandate" :options="options"
                        @on-change="val => $set(form1, 'nextPlandate', val)" format="yyyy-MM-dd" type="date"
                        placeholder="选择日期" />
                    </FormItem>
                  </i-col>
                </Row>
                <Row>
                  <i-col span="11">
                    <FormItem label="计划工作方式">
                      <Select v-model="form1.nextWorkType">
                        <Option v-for="item in listWorkType" :key="item.key" :value="item.key">{{ item.value }}</Option>
                      </Select>
                    </FormItem>
                  </i-col>
                </Row>
              </Form>

              <template #footer>
                <Button @click="doworkModal = false" style="margin-right:10px;">取消</Button>
                <Button type="primary" @click="doworkModal = false" :loading="doworkLoading">提交</Button>
              </template>
            </Modal>

            <Steps direction="vertical" size="small" style="margin-top:10px">
              <Step icon="ios-radio-button-on" v-for="(item, index) in serviceRecord" :key="index">
                <template slot="title">
                  <span style="font-size: 14px;font-weight: 600;color: #1D1D1D;">服务人员：{{ item.workname }}</span>
                </template>
                <template slot="content">
                  <Row>
                    <i-col span="8">
                      <span>工作日期：{{ item.updateTime ? item.updateTime.substr(0, 10) : '' }}</span>
                    </i-col>
                    <i-col span="8">
                      <!-- 网络联系业务员 -->
                      <span>工作方式：{{ item.worktype }}</span>
                    </i-col>
                    <i-col span="8">
                      <span style="margin-right: 200px;">交费期次：{{ item.payyear }}/{{ item.payyears }}年交</span>
                    </i-col>
                  </Row>
                  <Form label-position="left" style="display: block;margin-top:5px;margin-bottom:20px" class="form-self">
                    <div style="background: #FFF1F0;border-radius: 4px;padding:3px 10px;">
                      <Row style="margin-top:0px">
                        <i-col span="8">
                          <FormItem label="客户意愿：">
                            <!-- 打算失能 -->
                            <span>{{ item.customerWish }}</span>
                            <!-- <span v-for="(customerWishItem, indexC) in customerWishArr" :key="indexC">
                        <span v-if="item.customerWish == indexC + 1">{{customerWishItem}}</span>
                      </span> -->
                          </FormItem>
                        </i-col>
                        <i-col span="14" style="margin-left: -0.2%;">
                          <FormItem label="拜访记录：">
                            <div style="margin-left: 82px;word-wrap: break-word">{{ item.workresult }}</div>
                          </FormItem>
                        </i-col>
                      </Row>
                      <Row v-if="item.reasonByCustomer && item.reasonByCustomer.length > 0" style="margin-top:0px">
                        <i-col span="24">
                          <FormItem label="未收原因说明：">
                            <div style="margin-left: 110px;word-wrap: break-word">
                              <span>{{ item.reasonByCustomer ? item.reasonByCustomer.join('；') : '' }}</span>
                              <span v-if="item.reasonByother">：{{ item.reasonByother }}</span>
                            </div>
                            <!-- <span>暂时经济困难；社保冲击；其他原因：暂时没有交费能力</span> -->
                          </FormItem>
                        </i-col>
                      </Row>

                      <Row style="margin-top:0px">
                        <i-col v-if="item.reinstate" span="8">
                          <FormItem label="保单效力中止后，是否有复效打算：">
                            <span>{{ item.reinstate }}</span> <span v-if="item.reinstateDate">：{{
                              item.reinstateDate.substr(0,
                                10)
                              || '' }}</span>
                            <!-- <span>不确定</span> -->
                          </FormItem>
                        </i-col>
                        <i-col span="8" style="margin-left: -0.2%;">
                          <FormItem label="联系电话是否更新：">
                            <span>{{ item.phoneUpdateFlag ? item.phoneUpdateFlag : '无' }}</span>
                          </FormItem>
                        </i-col>
                        <i-col span="8" style="margin-left: 0.2%;">
                          <FormItem label="联系地址是否更新：">
                            <!-- <span>{{item.addressUpdateFlag ? item.addressUpdateFlag :'无'}}</span> -->
                            <div style="margin-left: 138px;word-wrap: break-word">
                              {{ item.addressUpdateFlag ? item.addressUpdateFlag : '无' }}</div>
                          </FormItem>
                        </i-col>
                      </Row>

                      <Row style="margin-top:0px">
                        <i-col span="8">
                          <FormItem label="下次工作再计划：">
                            <!-- <span>无</span> -->
                            <span>{{ item.nextWorkDate ? item.nextWorkDate.substr(0, 10) : '无' }}</span>
                          </FormItem>
                        </i-col>
                        <i-col span="15" style="margin-left: -0.2%;">
                          <FormItem label="计划工作方式：">
                            <!-- <span>无</span> -->
                            <span>{{ item.nextWorkType ? item.nextWorkType : '无' }}</span>
                          </FormItem>
                        </i-col>
                      </Row>
                    </div>

                    <div style="padding:3px 10px;">
                      <div v-if="item.interviewworkPath && item.interviewworkPath.length">
                        <Row>
                          <i-col span="24">
                            <FormItem label="面访上传证明图片：" class="full-item-facecontent">
                              <span class="pic-span" v-for="(facecontent, facecontentI) in item.interviewworkPath"
                                :key="facecontentI" @click="downloadInterview(facecontent)">
                                {{ facecontent.path }}{{ (facecontentI < item.interviewworkPath.length - 1) ? ';' : '' }}
                                  </span>
                                  <!-- <span class="pic-span" v-for="(facecontent,facecontentI) in item.facecontentArr"
                          :key="facecontentI" @click="downloadInterview(facecontent)">
                          {{facecontent.path}}{{(facecontentI < item.facecontentArr.length-1) ? ';' :''}}
                        </span> -->
                            </FormItem>
                          </i-col>
                        </Row>
                      </div>
                      <Row v-else>
                        <i-col span="24">
                          <FormItem label="面访上传证明图片：">
                            <!-- <span>图片023.jpg ; </span> -->
                            <span>无</span>
                          </FormItem>
                        </i-col>
                      </Row>

                      <div v-if="item.contentText && item.contentText.length">
                        <Row style="margin-top:0px" v-for="(note, noteI) in item.contentText" :key="noteI">
                          <i-col span="14">
                            <FormItem label="短信通知：" class="full-item">
                              <div style="margin-left: 5px;word-wrap: break-word">
                                发送对象：{{ note.persionid }} 发送内容：{{ note.messagecontent }}
                              </div>
                            </FormItem>
                          </i-col>

                          <i-col span="7">
                            <FormItem label="发送时间：">
                              <span>{{ note.createTime }}</span>
                            </FormItem>
                          </i-col>
                        </Row>
                        <!-- <Row style="margin-top:0px" v-for="(note,noteI) in item.notedetailArr" :key="noteI">
                    <i-col span="14">
                      <FormItem label="短信通知：" class="full-item">
                        <div style="margin-left: 5px;word-wrap: break-word">
                          发送对象：{{note.persionid}} 发送内容：{{note.messagecontent}}
                        </div>
                      </FormItem>
                    </i-col>

                    <i-col span="7">
                      <FormItem label="发送时间：">
                        <span>{{note.createTime}}</span>
                      </FormItem>
                    </i-col>
                  </Row> -->
                      </div>
                      <Row v-else>
                        <i-col span="14">
                          <FormItem label="短信通知：">
                            <span>无</span>
                          </FormItem>
                        </i-col>
                      </Row>

                      <div v-if="item.interviewworkPath && item.interviewworkPath.length">
                        <Row>
                          <i-col span="24">
                            <FormItem label="网络联系证明图片：" class="full-item-facecontent">
                              <span class="pic-span" v-for="(netcontentl, netcontentlI) in item.interviewworkPath"
                                :key="netcontentlI" @click="downloadInterview(netcontentl)">
                                {{ netcontentl.path }}{{ (netcontentlI < item.interviewworkPath.length - 1) ? ';' : '' }}
                                  </span>
                                  <!-- <span class="pic-span" v-for="(netcontentl,netcontentlI) in item.netcontentlArr"
                          :key="netcontentlI" @click="downloadInterview(netcontentl)">
                          {{netcontentl.path}}{{(netcontentlI < item.netcontentlArr.length-1) ? ';' :''}}
                        </span> -->
                            </FormItem>
                          </i-col>
                        </Row>
                      </div>
                      <Row v-else>
                        <i-col span="24">
                          <FormItem label="网络联系证明图片：">
                            <!-- <span>图片023.jpg ; </span> -->
                            <span>无</span>
                          </FormItem>
                        </i-col>
                      </Row>

                      <Row v-if="item.roleId != 19" style="margin-top:0px">
                        <i-col span="24">
                          <FormItem label="上级点评：" class="review-form-item">
                            <div style="margin-left:80px">

                              <div v-for="(ti, index) in item.professionalCommentVOS" :key="index"
                                style="margin-bottom:10px">
                                <div class="border-div" style="padding:5px 10px;">
                                  <span>{{ ti.commentname }}</span>

                                  <span @mouseleave="hIndex = -1">
                                    <!--  @click="rIndex = n" @mouseenter="hIndex = n" -->
                                    <img v-for="(i, n) in 5"
                                      :src="(ti.level - 1) > -1 ? n > (ti.level - 1) ? xing : xingR : n > rIndex ? xing : xingR"
                                      :key="n">
                                  </span>

                                  <Button type="text" @click="delRate(ti.id)" :loading="delLoading"
                                    style="position: absolute;right: 0;color:#FF4722">删除</Button>

                                  <div style="color: #2A2A2A;word-wrap: break-word">{{ ti.comment || '无评价' }}</div>
                                </div>
                                <div v-if="ti.replycomment && ti.replycomment.length">
                                  <div v-for="(reply, rN) in ti.replycomment" :key="rN"
                                    style="color: #2A2A2A;word-wrap: break-word">
                                    专员回复：{{ reply }}
                                  </div>
                                </div>
                              </div>

                              <!--  v-if="item.roleId!=19" -->
                              <span class="border-div" style="display: inline-block;padding:0 10px;margin-top:10px;">
                                <span>添加点评</span>
                                <span @mouseleave="hIndex = -1"
                                  style="border-left: 1px solid #eee;display: inline-block;margin-left:5px">
                                  <span style="margin-left:10px">
                                    <img v-for="(i, n) in 5"
                                      :src="hIndex > -1 ? n > hIndex ? xing : xingR : n > item.commentForm.level ? xing : xingR"
                                      :key="n" @click="item.commentForm.level = n" @mouseenter="hIndex = n"></span>
                                </span>
                              </span>
                              <Input v-model="item.commentForm.comment" type="textarea" maxlength="100" show-word-limit
                                clearable placeholder="输入点评内容" class="no-border-radius" />
                              <Button type="primary" @click="submitRate(item)" :loading="commentLoading"
                                style="margin-top:10px">提交</Button>
                            </div>

                          </FormItem>
                        </i-col>
                      </Row>
                    </div>
                  </Form>
                </template>
              </Step>
            </Steps>
          </Card>

          <Card style="margin-top:20px">
            <div class="header1">
              <div style="display: flex;">
                <span class="line1">
                </span>
                <span class="title">历史提醒</span>
              </div>
              <Button type="primary" @click="renewalRemindModal = true">
                添加续期服务提醒
              </Button>
            </div>

            <div class="his-box" v-for="(item, index) in historyList" :key="index">
              <div style="display: flex;align-items: center;">
                <div class="crl"></div>
                <div class="title">提醒人员：{{ item.agentName }}</div>
              </div>
              <div style="margin-left: 18px;">
                <div style="margin:10px 0">提醒日期：{{ item.creteTime ? item.creteTime.substr(0, 10) : '' }}</div>
                <div style="word-wrap: break-word">提醒内容：{{ item.renewalRemind }}</div>
              </div>
            </div>
          </Card>
          <Modal v-model="renewalRemindModal" title="添加续期服务提醒" :mask-closable="false">
            <Input v-model.trim="renewalRemind" type="textarea" maxlength="100" show-word-limit clearable
              placeholder="请输入给予业务员的续期服务提醒" />
            <template #footer>
              <Button @click="renewalRemindModal = false" style="margin-right:10px;">取消</Button>
              <Button type="primary" @click="renewalRemindModal = false" :disabled="!renewalRemind"
                :loading="renewalRemindLoading">提交</Button>
            </template>
          </Modal>

          <div class="contain" ref="mybox" style="width:0;hieght:0;overflow:hidden">
            <canvas id="myCanvas" width="200" height="100" ref="myCanvas"></canvas>
          </div>
          <!-- 显示图片 -->
          <Modal footer-hide="true" v-model="handleShowFile" width="1200px" title="在线预览">
            <img style="width:100%;height:100%" :src="biggerPath" alt="">
          </Modal>
          <Modal :value="dialogVisible" :mask-closable="false" footer-hide="true" @on-visible-change="dialogVisibleChange"
            :styles="{ top: '250px' }" width="580">
            <span slot="header" style="color:#fff;font-size:16px">交费难度</span>
            <div>
              <Table :columns="dialogColumns" :data="dialogData">
                <template slot-scope="{row}" slot="score">
                  <div>{{ row.c }}</div>
                </template>
              </Table>
            </div>
          </Modal>
        </TabPane>
        <TabPane label="客户信息">
          <CustomerDetail :path="1" />
        </TabPane>
      </Tabs>
    </Card>
  </div>
</template>

<script>
// import { drawSign } from "../../../util/drawSign";
// import { downloadUrl, exportFile, visitFile } from "../../../util/util";
import CustomerDetail from '@/views/customerManage/customerDetail/index.vue';
export default {
  components: { CustomerDetail },
  name: 'ServiceDetail',
  data() {
    return {
      xingR: require("../../../../assets/image/xingR.png"),
      xing: require("../../../../assets/image/xing.png"),
      rIndex: -1,
      hIndex: -1,
      value: "",
      subRisks: "",
      commentForm: {
        level: -1,
      },
      customerWishArr: ["宽限期交费", "打算退保", "打算失效"],
      historyList: [{
        agentName: "刘玉坤",
        creteTime: "2023-05-20",
        renewalRemind: "6月25日通过渠道内勤追踪反馈客户宽限期内交费",
      }],
      renewalRemindModal: false,
      renewalRemindLoading: false,
      renewalRemind: "",
      form1: { reasonByCustomer: [], customerWish: "1", reinstate: "1" },
      options: {
        disabledDate(date) {
          return date && date.valueOf() < Date.now() - 86400000;
        },
      },
      doworkModal: false,
      doworkLoading: false,
      listWorkType: [],
      tabList: [],
      row: this.$route.query.row,
      phoneRecord: false,
      phoneCCRecord: false,
      messageContent: false,
      interviewModal: false,
      internetModal: false,
      // 上半部分数据
      basicInformation: {
        "showbaseflag": "0",
        "showpayflag": "0",
        "agentdetail": {
          "agentstate": "01",
          "agentcode": "3130000191",
          "name": "苏梅",
          "managecom": "861301",
          "managecomname": "****人寿保险股份有限公司石家庄中心支公司",
          "mobile": "18731803065",
          "branchType": "3",
          "branchTypeName": "银保"
        },
        "contdetail": {
          "contflagname": "在职单",
          "payyear": 2,
          "payyears": 5,
          "payintv": "12",
          "payintvname": "年交",
          "paytodate": "2023-05-03 00:00:00",
          "paymoney": 10000,
          "mainrisk": "ICW005",
          "mainriskname": "****人寿鑫禧人生终身寿险",
          "mainpolpaymoney": 10000,
          "subpol": [],
          "totalsubpolmoney": 0,
          difficulty: 0
        },
        "customerdetail": {
          "appntno": "0001811850",
          "addressNo": "3",
          "appntname": "王秋芬",
          "customerprotrayal": null,
          "appntsex": "1",
          "appntsexname": "女",
          "insuredno": "0001811850",
          "insuredname": "王秋芬",
          "insuredsex": "1",
          "insuredsexname": "女",
          "relation": "本人",
          "appntphone": "17331888006",
          "insuredphone": "17331888006",
          "appntpostaladdress": "河北省衡水市饶阳县人民路北粮局家属1－2－102",
          "bankcode": "102",
          "bankname": "中国工商银行",
          "bankaccno": "62220304070****7504"
        },
        "workdetailValueMapsVO": {
          "workdate": "2023-06-15 00:00:00",
          "worktypeName": "电话联系业务员",
          "relatedPlannum": "0",
          "historyWorknum": "1",
          "planremark": null,
          "estimatestate": [],
          "linksuccessflag": [],
          "order": [],
          "nextWorkType": [
            {
              "key": "0",
              "value": "短信联系业务员"
            },
            {
              "key": "1",
              "value": "电话联系业务员"
            },
            {
              "key": "2",
              "value": "网络联系业务员"
            },
            {
              "key": "3",
              "value": "面访业务员"
            },
            {
              "key": "4",
              "value": "短信联系客户"
            },
            {
              "key": "5",
              "value": "电话联系客户"
            },
            {
              "key": "6",
              "value": "网络联系客户"
            },
            {
              "key": "7",
              "value": "面访客户"
            }
          ]
        },
        "sendmessagetips": null
      },
      basicInformation1: {
        "agentstate": "01",
        "name": "时林",
        "reagentcode": "6130100003",
        "mobile": "19903111936",
        "managecom": "861301",
        "managecomname": "****人寿保险股份有限公司石家庄中心支公司",
        "agentgradename": "中级续收专员"
      },
      // 下半部分数据
      serviceRecord: [
        {
          "contno": "213202232442306",
          "plainid": "1654939116345683969",
          "workid": "1654939116358266882",
          "role": "机构外勤-续期专员",
          "roleId": "21",
          "ramark": null,
          "address": null,
          "updateTime": "2023-06-05 00:00:00",
          "workresult": "6月5日通过渠道内勤追踪反馈客户宽限期内交费",
          "payyear": 2,
          "payyears": 5,
          "payintv": "年交",
          "worktype": "电话联系业务员",
          "workname": "时林",
          "agentgrade": "X102",
          "estimatestate": null,
          "difficulty": null,
          "estimatedate": null,
          "linksuccessflag": null,
          "orderwith": null,
          "reasonByCompany": [],
          "reasonByCustomer": [],
          "reasonByother": null,
          "workresultid": [],
          "result": null,
          "paystate": null,
          "recordingaddress": null,
          "notedetail": null,
          "netcontent": null,
          "facecontent": null,
          "professionalCommentVOS": null,
          commentForm: {
            level: -1,
          },
          "payFinishVOS": [
            {
              "finishstate": "交费完成",
              "lastpaytodate": "2023-06-30 00:00:00",
              "paytimes": "交费期次",
              "paycount": 2,
              "payyears": 5,
              "payintvname": "年交"
            }
          ],
          "wxPayFinishVOS": [
            {
              "finishstate": "交费完成",
              "lastpaytodate": "2023-06-30 00:00:00",
              "paytimes": "交费期次",
              "paycount": 2,
              "payyears": 5,
              "payintvname": "年交"
            }
          ],
          "wxPayFailVOS": [],
          "agenttype": null,
          "uerMessageToAgentVOS": null,
          "customerWish": "宽限期交费",
          "reinstate": null,
          "interviewworkPath": [],
          "networkPath": [],
          "contentText": [],
          "phoneUpdateFlag": null,
          "addressUpdateFlag": null,
          "nextWorkFlag": "0",
          "nextWorkType": "电话联系业务员",
          "nextWorkDate": "2023-06-15 00:00:00",
          "reinstateDate": null
        }
      ],
      // 交办件数据
      assignmentInfo: "",
      // 电话录音表格
      phoneRecordColumns: [
        {
          title: "时间",
          key: "createTime",
          width: "180",
        },
        {
          title: "文件",
          key: "src",
          width: "80",
          slot: "audio",
        },
        {
          title: "名称",
          key: "recordingaddress",
          width: "180",
        },
        {
          title: "操作",
          key: "opration",
          slot: "opration",
        },
      ],
      // cc电话录音
      phoneCCRecordColumns: [
        {
          title: "时间",
          key: "createTime",
          width: "200",
        },
        {
          title: "操作",
          key: "opration",
          slot: "opration",
        },
      ],
      phoneRecordData: [
        {
          time: "2019-11-11 08:22:22",
          name: "电话录音文件1",
        },
      ],
      // 短信表格
      messageContentColumns: [
        {
          title: "发送时间",
          key: "createTime",
          width: "180",
        },
        {
          title: "发送对象",
          key: "persionid",
          width: "100",
        },
        {
          title: "发送内容",
          key: "messagecontent",
        },
      ],
      messageContentData: [
        {
          sendTime: "2019-11-11 08:22:22",
          sendPerson: "张宁",
          sendContent: "粘稠度】标签说明每天更新标签，截止至昨天最新数据【交费习惯】标签说明每年1.1号对所有续期用户进行标签更新，计算前两年内续期保单交费时间所在宽限期天数，默认为“一般”，若其他条件，则显示标签中最重要的。显示顺序为拖沓＞及时＞准时忙碌时间段】标签说明每年1.1号对所有续期用户进行标签更新，计算前两年内专员录入“未拨通”、“客户挂断电话”情况，对应所在时间段",
        },
      ],
      // 面访联系表格
      interviewColumns: [
        {
          title: "时间",
          key: "createTime",
          width: "180",
        },
        {
          title: "文件",
          key: "src",
          width: "80",
          slot: "audio",
        },
        {
          title: "名称",
          key: "path",
          width: "180",
        },
        {
          title: "操作",
          key: "opration",
          slot: "opration",
        },
      ],
      interviewData: [
        {
          time: "2019-11-11 08:22:22",
          name: "电话录音文件1",
        },
      ],
      // 网络联系表格
      internetColumns: [
        {
          title: "时间",
          key: "createTime",
          width: "180",
        },
        {
          title: "文件",
          key: "src",
          width: "80",
          slot: "audio",
        },
        {
          title: "名称",
          key: "path",
          width: "180",
        },
        {
          title: "操作",
          key: "opration",
          slot: "opration",
        },
      ],
      internetData: [
        {
          time: "2019-11-11 08:22:22",
          name: "电话录音文件1",
        },
      ],
      // 星级记录
      RateList: [
        {
          name: "吴晗",
          rateValue: "2",
          advice: "继续努力",
          index: "1",
        },
        {
          name: "吴是",
          rateValue: "3",
          advice: "继续努力",
          index: "2",
        },
      ],
      // 未收原因说明
      notReceiveReasonList: [
        {
          reason: "业务员投保",
        },
        {
          reason: "家庭原因",
        },
      ],
      // 工作结果
      workResultList: [
        {
          workResult: "客户明确不交费",
        },
        {
          workResult: "家庭原因",
        },
      ],
      contactList: [
        {
          contactType: "电话联系",
          contactImage: "图片.jpg",
        },
        {
          contactType: "面访联系",
          contactImage: "图片.jpg",
        },
      ],
      rateValue: 0,
      rateAdvice: "",
      payWay: true,
      // 保单查询进入服务详情的服务记录
      serviceRecord1: null,
      recordType: "",
      kg: "          ",
      phoneCCRecordList: [],
      handleplayOrPause: false,
      handleShowFile: false,
      biggerPath: "",
      audioUrl: new Audio(),
      audioid: "",
      dialogVisible: false,
      dialogColumns: [
        {
          title: "因子名称",
          key: "a",
          width: "180",
          align: "center",
        },
        {
          title: "占比",
          key: "b",
          width: "120",
          align: "center",
        },
        {
          title: "分数",
          key: "c",
          width: "120",
          align: "center",
          slot: "score",
        },
        {
          title: "实际值",
          key: "d",
          width: "120",
          align: "center",
        },
      ],
      dialogData: [
        { a: '业务员过往继续率', b: '15%', c: '0', d: '0' },
        { a: '险种产品类别', b: '10%', c: '0', d: '疾病保险' },
        { a: '业务员出勒次数', b: '10%', c: '0', d: '33' },
        { a: '是否有过退保', b: '10%', c: '100', d: '否' },
        { a: '保单交费年限', b: '10%', c: '0', d: '30' },
        { a: '是否在职单类型', b: '5%', c: '100', d: '在职单' },
        { a: '是否重复白保件', b: '5%', c: '0', d: '是' },
        { a: '投保人年龄', b: '5%', c: '0', d: '25' },
        { a: '是否有附加险', b: '5%', c: '100', d: '是' },
        { a: '保单分红水平比', b: '2%', c: '0', d: '' },
        { a: '期交保费', b: '2%', c: '60', d: '7873.19' },
        { a: '出单时业务员司龄', b: '2%', c: '0', d: '3' },
        { a: '是否有过投诉记录', b: '2%', c: '100', d: '否' },
        { a: '是否聘才', b: '2%', c: '100', d: '否' },
        { a: '保单保额是否非整万', b: '2%', c: '100', d: '否' },
        { a: '保单现金价值率', b: '2%', c: '0', d: '' },
        { a: '是否有过理赔记录', b: '2%', c: '0', d: '否' },
        { a: '是否有两张及以上的保单', b: '2%', c: '100', d: '是' },
        { a: '是否发生过账号变更', b: '2%', c: '0', d: '否' },
        { a: '是否有过保单贷款', b: '2%', c: '0', d: '否' },
      ],
    };
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    },
    dialogVisibleChange(val) {
      this.dialogVisible = val;
    },
    checkPhone(value) {
      let regMobile = /^(13|14|15|18|17|16|19)[0-9]{9}$/;
      if (value) {
        if (value.length != 11)
          return true;
        else if (!regMobile.test(value))
          return true;
      }
    },
    doworkSubmit() {
      return;
      if (this.form1.phone && this.checkPhone(this.form1.phone))
        return this.$Message.info("请正确填写联系电话");
      if (this.form1.planDate == "")
        return this.$Message.info("请录入工作日期");
      if (this.form1.workType == "")
        return this.$Message.info("请录入工作方式");
      if (this.form1.workresult == "")
        return this.$Message.info("请录入拜访记录");
      if (this.form1.customerWish == 1) {
        this.form1.reasonByCustomer = "";
        this.form1.reasonByother = "";
        this.form1.reinstate = "";
        this.form1.reinstateDate = "";
      }
      if (this.form1.customerWish != 1 && this.form1.reasonByCustomer == "")
        return this.$Message.info("请录入未收原因说明");
      if (this.form1.reasonByCustomer.includes("99")) {
        let array = this.form1.reasonByCustomer;
        array.push(array.splice(array.indexOf("99"), 1)[0]);
        if (this.form1.reasonByother == "")
          return this.$Message.info("请录入其它原因");
      }
      // if (
      //   this.form1.reasonByCustomer.includes("99") &&
      //   this.form1.reasonByother == ""
      // )
      //   return this.$Message.info("请录入其它原因");
      if (this.form1.customerWish != 1 && this.form1.reinstate == "")
        return this.$Message.info("请录入保单效力中止后，是否有复效打算");
      if (this.form1.reinstate == "1" &&
        (this.form1.reinstateDate == "" || !this.form1.reinstateDate))
        return this.$Message.info("请录入复效时间");
      let obj = {
        nextworkflag: "0",
        // addressNo: this.customer.addressNo,
        // appntNo: this.customer.appntno,
        // workType: this.form1.workType,
        addressNo: this.basicInformation.customerdetail.addressNo,
        appntNo: this.basicInformation.customerdetail.appntno,
        workType: this.form1.workType,
        // element.appointeddate = element.appointeddate.substr(0, 10);
        planDate: this.$d(this.form1.planDate).format("YYYY-MM-DD"),
        // planDate: this.form1.planDate,
        customerWish: this.form1.customerWish || null,
        reasonByother: this.form1.reasonByother || null,
        workresult: this.form1.workresult || null,
        reinstate: this.form1.reinstate || null,
        reinstateDate: this.form1.reinstateDate || null,
        phone: this.form1.phone || null,
        customerAddress: this.form1.customerAddress || null,
        nextPlandate: this.form1.nextPlandate || null,
        nextWorkType: this.form1.nextWorkType || null,
        // workid: this.selection[this.tabIndex].workid
        //   ? this.selection[this.tabIndex].workid
        //   : null,
        // workid: this.selection[this.tabIndex].workid
        //   ? this.selection[this.tabIndex].workid
        //   : null,
        // planid: this.selection[this.tabIndex].planid,
        workid: this.$route.query.row.workid,
        planid: this.$route.query.row.planid,
        // contno: this.$route.query.row.contno,
      };
      let user = "";
      if (this.form1.reasonByCustomer &&
        this.form1.reasonByCustomer.length > 0) {
        this.form1.reasonByCustomer.forEach((element) => {
          user += element + ",";
        });
        user = user.substr(0, user.length - 1);
      }
      else {
        user = null;
      }
      obj.reasonByCustomer = user;
      console.log(obj);
      this.doworkLoading = true;
      this.api
        .dowork(obj)
        .then((res) => {
          if (res.code == 200) {
            this.$Message.info(res.msg);
            this.getBasicStatisticsInfo(this.$route.query.row);
            // this.reset();
            this.doworkModal = false;
            // this.getTotal(JSON.parse(this.$route.query.selection));
          }
          else
            this.$Message.info(res.msg);
        })
        .finally(() => (this.doworkLoading = false));
    },
    reset() {
      this.form1 = { reasonByCustomer: [], customerWish: "1", reinstate: "1" };
    },
    reasonByCustomerChange(val) {
      !val.includes("99") && this.$set(this.form1, "reasonByother", "");
    },
    renewalRemindSubmit() {
      return;
      if (!this.renewalRemind)
        return this.$Message.info("请输入给予业务员的续期服务提醒");
      let obj = {
        workid: this.$route.query.row.workid,
        planid: this.$route.query.row.planid,
        // contno: this.$route.query.row.contno,
        renewalRemind: this.renewalRemind,
      };
      this.renewalRemindLoading = true;
      this.api
        .renewalserviceremind(obj)
        .then((res) => {
          if (res.code == 200) {
            this.getHistoryList();
            this.$Message.info("续期服务提醒成功");
            this.renewalRemind = "";
            this.renewalRemindModal = false;
          }
          else
            this.$Message.info(res.msg);
        })
        .finally(() => (this.renewalRemindLoading = false));
    },
    // 显示图片
    showFile(row) {
      if (row.ext == "jpg" || row.ext == "png" || row.ext == "jpeg") {
        this.biggerPath = row.photoUrl;
        this.handleShowFile = true;
      }
      else if (row.ext == "pdf") {
        let type = row.photoUrl.split("type=")[1];
        let obj = {
          id: row.id,
          worktype: type,
        };
        visitFile("api/fileDownload/downloadWork", obj);
      }
      else {
        this.$Message.info("该文件不支持在线预览，请下载到本地后打开");
      }
    },
    //播放完毕执行
    overAudio() {
      console.log("播放声音完毕");
      let arr = this.phoneRecordData;
      this.phoneRecordData = [];
      arr.forEach((item) => {
        if (this.audioid == item.id) {
          item.handleplayOrPause = false;
        }
        this.phoneRecordData.push(item);
      });
    },
    //播放
    playOrPause(data) {
      let arr = this.phoneRecordData;
      this.phoneRecordData = [];
      arr.forEach((item) => {
        if (data.id == item.id) {
          if (!item.handleplayOrPause) {
            this.audioUrl.src = item.photoUrl;
            this.audioid = data.id;
            this.audioUrl.play();
            item.handleplayOrPause = true;
            this.audioUrl.onended = () => {
              this.overAudio();
            };
          }
          else {
            this.audioUrl.pause();
            item.handleplayOrPause = false;
          }
        }
        else {
          item.handleplayOrPause = false;
        }
        this.phoneRecordData.push(item);
      });
    },
    // 电话录音对话框点击显示
    async phoneRecordShow({ plainid, workid }) {
      return;
      let res = await this.api.recordingInfo({
        plainid,
        workid,
      });
      this.phoneRecordData = res.data;
      this.phoneRecordData.forEach((item) => {
        item.handleplayOrPause = false;
      });
      // console.log(res.data);
      this.phoneRecord = true;
    },
    showphoneCCRecord(item) {
      console.log(item);
      this.phoneCCRecordList = item.url;
      this.phoneCCRecord = true;
    },
    // 对话框关闭
    modalVisibleChange3() {
      this.phoneRecord = false;
      this.audioUrl.pause();
      this.phoneCCRecord = false;
    },
    // 短信内容对话框点击显示
    async messageContentShow(item) {
      return;
      let res = await this.api.smsData({
        plainid: item.plainid,
        workid: item.workid,
      });
      this.messageContentData = res.data;
      item.notedetailArr.push(...res.data);
      //  = res.data;
      console.log(res.data, item.notedetailArr);
      // this.messageContent = true;
    },
    // 对话框关闭
    modalVisibleChange4() {
      this.messageContent = false;
    },
    // 面访对话框显示
    async interviewShow(item) {
      return;
      let res = await this.api.interviewPicturesInfo({
        plainid: item.plainid,
        workid: item.workid,
      });
      this.interviewData = res.data;
      this.interviewData.forEach((item, index) => {
        let arr = item.path.split(".");
        let ext = arr[arr.length - 1];
        item.ext = ext;
        if (ext == "jpg" || ext == "png" || ext == "jpeg") {
          item.icon = "image";
        }
        else {
          item.icon = "paper";
        }
      });
      item.facecontentArr = this.interviewData;
      // console.log("item.facecontentArr", item.facecontentArr);
      // this.interviewModal = true;
    },
    // 网络对话框
    async internetShow(item) {
      return;
      let res = await this.api.internetPicturesInfo({
        plainid: item.plainid,
        workid: item.workid,
      });
      this.internetData = res.data;
      this.internetData.forEach((item, index) => {
        let arr = item.path.split(".");
        let ext = arr[arr.length - 1];
        item.ext = ext;
        if (ext == "jpg" || ext == "png" || ext == "jpeg") {
          item.icon = "image";
        }
        else {
          item.icon = "paper";
        }
      });
      item.netcontentlArr = this.internetData;
      // this.internetModal = true;
    },
    // 星级改变
    rateChange(value) {
      // console.log(value, this.row);
    },
    variable() {
      // console.log(this.row,'111')
      if (this.$route.query.row.payintvname === "趸交") {
        this.payWay = false;
      }
    },
    // 获取问题件详情
    async getProblemInfo({ problemFileId, contno }) {
      return;
      let res = await this.api.getProblemFileWorkDetail({
        problemFileId,
        contno,
      });
      this.$set(this, "basicInformation", res.data);
      this.basicInformation.agentdetail.agentstate =
        this.basicInformation.agentdetail.agentState;
      this.basicInformation.agentdetail.managecom =
        this.basicInformation.agentdetail.manageCom;
      this.basicInformation.agentdetail.managecomname =
        this.basicInformation.agentdetail.manageComName;
      this.$Loading.finish();
    },
    // 获取页面数据
    async getBasicStatisticsInfo() {
      return;
      // console.log(planid, agentcode);
      this.contno = contno;
      // 三个信息
      let res = await this.api.workStatusBasicStatisticsInfo({
        planid: planid || "",
        agentcode,
        contno,
        visitType: 0,
        reagentcode: reagentcode || "",
      });
      // 续期专员信息
      let res1 = await this.api.workStatusBasicStatisticsInfo1({ reagentcode });
      // 服务记录
      let res2 = await this.api.workStatusServiceRecord({
        planid,
        contno,
        paytodate,
      });
      let CCrecord = [];
      // $.ajax("../api/ccRecord/selectCCRecord/" + contno, {
      //   method: "get",
      //   contentType: "application/json;charset=utf-8",
      //   headers: {
      //     Authorization: sessionStorage.getItem("credentials"),
      //   },
      //   success: (res) => {
      //     if (res.code == 200 && res.data != null) {
      //       CCrecord = res.data;
      //       console.log(CCrecord, "CCrecord");
      //       if (CCrecord.length != 0) {
      //         CCrecord.forEach((item, index) => {
      //           item.updateTime = item.subtime;
      //           item.worktype = "客服电话联系客户";
      //           item.infoType = "CC";
      //           item.payyear = String(this.$route.query.row.payyear);
      //           item.payyears = this.$route.query.row.payyears;
      //           item.payintv = this.$route.query.row.payintvname;
      //           res2.data.push(item);
      //         });
      //         res2.data.sort(function (a, b) {
      //           return b.updateTime < a.updateTime ? -1 : 1;
      //         });
      //         // this.$set(this, "serviceRecord", res2.data);
      //       }
      //     } else {
      //       CCrecord = [];
      //       // this.$set(this, "serviceRecord", res2.data);
      //     }
      //   },
      //   error: (res) => {
      //     this.$Message.error(res.msg);
      //   },
      // });
      // 保单信息
      if (res.data.contdetail) {
        this.cont = res.data.contdetail;
        this.subRisks = "";
        // res.data.contdetail.subpol.push(res.data.contdetail.subpol[0])
        if (res.data.contdetail.subpol &&
          res.data.contdetail.subpol.length > 0) {
          res.data.contdetail.subpol.forEach((element, index) => {
            let str = res.data.contdetail.subpol.length > 1 ? "附加" + (index + 1) : "";
            this.subRisks +=
              str +
              " " +
              element.riskname +
              "-" +
              element.subprem +
              "元" +
              "<br>";
          });
        }
        if (this.cont.paytodate) {
          this.cont.paytodate = this.cont.paytodate.substr(0, 10);
        }
        else {
          this.cont.paytodate = "";
        }
        if (this.cont.payyear &&
          this.cont.payyears &&
          this.cont.payintvname) {
          this.cont.payCount =
            this.cont.payyear +
            "/" +
            this.cont.payyears +
            this.cont.payintvname;
        }
        else {
          this.cont.payCount = "";
        }
      }
      console.log(res2.data, "res2.data");
      res2.data.forEach((item, index) => {
        item.commentForm = {
          level: -1,
        };
        //   if (item.notedetail) {
        //     item.notedetailArr = [];
        //     // 短信内容
        //     this.messageContentShow(item);
        //   }
        //   if (item.facecontent) {
        //     item.facecontentArr = [];
        //     // 面访联系图片
        //     this.interviewShow(item);
        //   }
        //   if (item.netcontent) {
        //     item.netcontentlArr = [];
        //     // 网络联系图片
        //     this.internetShow(item);
        //   }
      });
      this.$set(this, "serviceRecord", res2.data);
      console.log(this.serviceRecord, "serviceRecord");
      // this.basicInformation = res.data;
      this.$set(this, "basicInformation", res.data);
      this.listWorkType = res.data.workdetailValueMapsVO.nextWorkType;
      // this.basicInformation1 = res1.data;
      this.$set(this, "basicInformation1", res1.data);
      // this.api.getWorkInformation({ agentcode }).then((res) => {
      //   console.log("66666666666", res);
      // });
      // this.serviceRecord = res2.data;
      // alert("工作录入基础信息：" + this.basicInformation.agentdetail.name + ",续期专员信息：" + this.basicInformation1.name);
      // console.log("历史服务记录：",this.serviceRecord);
      // console.log(this.serviceRecord[0].workresult);
      this.$Loading.finish();
    },
    // 添加评价
    async submitRate(item) {
      return;
      console.log(item);
      let { workid, plainid, userRate, rateAdvice } = item;
      let res = await this.api.sublimeRate({
        workid,
        planid: plainid,
        // level: userRate,
        // comment: rateAdvice,
        // comment: this.commentForm.comment,
        // level: this.commentForm.level + 1,
        comment: item.commentForm.comment,
        level: item.commentForm.level + 1,
      });
      if (res.code === 200) {
        this.$Message.success("点评成功！");
        this.getBasicStatisticsInfo(this.$route.query.row);
        item.commentForm = {
          level: -1,
        };
        item.userRate = "";
        item.rateAdvice = "";
        //2020-12-15 用于触发弹窗
        this.api
          .sendNotice({
            agentcode: this.basicInformation1.reagentcode,
            messageid: this.row.contno,
            messagetype: 0,
          })
          .then((res) => {
            console.log(res);
          });
        this.api
          .pushOneUser({
            agentCode: this.basicInformation1.reagentcode,
            templateType: "1",
            planid: plainid,
            workid: workid,
          })
          .then((res) => {
            console.log(res);
          });
      }
      else
        this.$Message.success(res, msg);
    },
    // 删除评价
    async delRate(id) {
      return;
      this.delLoading = true;
      let res = await this.api.deleteRate({ id });
      if (res.code === 200) {
        this.$Message.success("删除点评成功！");
        this.getBasicStatisticsInfo(this.$route.query.row);
      }
      else {
        this.$Message.info("不支持删除其他用户的评论");
      }
      this.delLoading = false;
    },
    downloadCCPhoneRecord(url) {
      window.open(url);
    },
    downloadPhoneRecord(row) {
      let obj = {
        id: row.id,
        worktype: "phone",
      };
      // window.open(
      //   `../rest/fileDownload/downloadWork?id=${row.id}&&worktype=phone`
      // )
      exportFile("api/fileDownload/downloadWork", obj);
    },
    downloadInterview(item) {
      downloadUrl(item.photoUrl, item.path);
    },
    // downloadInterview(id) {
    //   let obj = {
    //     id,
    //     worktype: "interview",
    //   };
    //   // window.open(
    //   //   `../rest/fileDownload/downloadWork?id=${id}&&worktype=interview`
    //   // )
    //   exportFile("api/fileDownload/downloadWork", obj);
    // },
    downloadInternet(id) {
      let obj = {
        id,
        worktype: "net",
      };
      // window.open(`../rest/fileDownload/downloadWork?id=${id}&&worktype=net`)
      exportFile("api/fileDownload/downloadWork", obj);
    },
    // 查询不同位置的基础信息
    async getSelectBaseInformation({ contno }) {
      return;
      console.log(contno, "222");
      this.contno = contno;
      let res = await this.api.selectBaseInformation({ contno });
      let res1 = await this.api.selectreagentInformation({ contno });
      this.basicInformation = res.data;
      // this.$set(this,'basicInformation', res.data);
      this.basicInformation1 = res1.data;
      this.api.getWorkInformation({ contno }).then((res) => {
        console.log("66666666666", res);
      });
    },
    // 查询下半部分信息
    async getBottomInfo({ contno }) {
      return;
      let res = await this.api.selectallworkdetail({ contno });
      let CCrecord = [];
      $.ajax("../api/ccRecord/selectCCRecord/" + contno, {
        method: "get",
        contentType: "application/json;charset=utf-8",
        headers: {
          Authorization: sessionStorage.getItem("credentials"),
        },
        success: (data) => {
          if (data.code == 200 && data.data != null) {
            CCrecord = data.data;
            console.log(this.$route.query.row, "CCrecord");
            if (CCrecord.length != 0) {
              let arr = res.data ? res.data.allProfessionalWorkdetail : [[]];
              CCrecord.forEach((item, index) => {
                item.updateTime = item.subtime;
                item.worktype = "客服电话联系客户";
                item.infoType = "CC";
                item.payyear = String(this.$route.query.row.payyear);
                item.payyears = this.$route.query.row.payyears;
                item.payintv = this.$route.query.row.payintvname;
                console.log(res.data);
                if (res.data) {
                  arr[0].push(item);
                  arr[0].sort(function (a, b) {
                    return b.updateTime < a.updateTime ? -1 : 1;
                  });
                  this.$set(this, "serviceRecord1", arr);
                }
                else {
                  console.log("1365");
                  arr[0].push(item);
                  console.log(arr);
                  this.$set(this, "serviceRecord1", arr);
                }
                console.log("serviceRecord1", this.serviceRecord1);
              });
            }
          }
          else {
            CCrecord = [
              {
                customerserviceno: "123456",
              },
            ];
            this.$set(this, "serviceRecord1", res.data ? res.data.allProfessionalWorkdetail : []);
          }
        },
        error: (res) => {
          this.$Message.error(res.msg);
        },
      });
      // this.serviceRecord1 = res.data?res.data.allProfessionalWorkdetail:[];
      // console.log("服务信息："+this.serviceRecord1);
    },
    //多保单查询
    queryRelateCont() {
      return;
      this.tabList.push(this.$route.query.row);
      this.contno = this.$route.query.row.contno;
      let params = {
        appntno: this.$route.query.row.appntno,
        contno: this.$route.query.row.contno,
      };
      this.api.queryRelateCont(params).then((res) => {
        if (res.code == 200 && res.data != null) {
          // console.log(res)
          this.tabList = this.tabList.concat(res.data);
          console.log(this.tabList);
        }
        else {
          this.$Message.info(res.msg);
        }
      });
    },
    //切换标签页
    reSearch(name) {
      return;
      this.assignmentInfo = this.tabList[name];
      if (name == 0) {
        this.assignmentInfo = this.$route.query;
        // console.log("路由跳转过来的参数：",this.$route.query);
        if (this.$route.query.type === "policyEnquiry") {
          if (this.$route.query.row.payintvname === "趸交") {
            // console.log("期交");
            this.getSelectBaseInformation(this.$route.query.row);
          }
          else {
            // console.log("趸交");
            this.getSelectBaseInformation(this.$route.query.row);
            this.getBottomInfo(this.$route.query.row);
          }
        }
        else if (this.$route.query.insuranceType === "problem") {
          this.getProblemInfo(this.$route.query.row);
        }
        else {
          this.getBasicStatisticsInfo(this.$route.query.row);
        }
      }
      else {
        if (this.tabList[name].type === "policyEnquiry") {
          if (this.tabList[name].payintvname === "趸交") {
            // console.log("期交");
            this.getSelectBaseInformation(this.tabList[name]);
          }
          else {
            // console.log("趸交");
            this.getSelectBaseInformation(this.tabList[name]);
            this.getBottomInfo(this.tabList[name]);
          }
        }
        else if (this.$route.query.insuranceType === "problem") {
          this.getProblemInfo(this.tabList[name]);
        }
        else {
          this.getBasicStatisticsInfo(this.tabList[name]);
        }
      }
    },
    async changeTab(name) {
      console.log(name);
      this.$Loading.start();
      await this.reSearch(name);
      // this.$Loading.finish()
    },
    draw(ele, loginUser, loginTime) {
      return;
      // let imageUrl = drawSign(ele, loginUser, loginTime);
      console.log("imageUrl", imageUrl);
      document.getElementsByClassName("ivu-card-body")[0].style.background =
        "url(" + imageUrl + ") left top repeat";
    },
    getHistoryList() {
      return;
      this.api
        .renewalremindhistory({
          workid: this.$route.query.row.workid,
          planid: this.$route.query.row.planid,
          contno: this.$route.query.row.contno,
        })
        .then((res) => {
          if (res.code == 200) {
            this.historyList = res.data;
          }
          else
            this.$Message.info(res.msg);
        });
    },
  },
  mounted() {
    this.variable();
    this.getHistoryList();
    let loginUser = sessionStorage.getItem("name");
    let loginTime = new Date().getFullYear() +
      "/" +
      (new Date().getMonth() + 1) +
      "/" +
      new Date().getDate();
    this.draw(this.$refs.myCanvas, loginUser, loginTime);
  },
  created() {
    this.queryRelateCont();
    this.assignmentInfo = this.$route.query;
    console.log("路由跳转过来的参数：", this.$route.query);
    if (this.$route.query.type === "policyEnquiry") {
      if (this.$route.query.row.payintvname === "趸交") {
        // console.log("期交");
        this.getSelectBaseInformation(this.$route.query.row);
      }
      else {
        // console.log("趸交");
        this.getSelectBaseInformation(this.$route.query.row);
        this.getBottomInfo(this.$route.query.row);
      }
    }
    else if (this.$route.query.insuranceType === "problem") {
      this.getProblemInfo(this.$route.query.row);
    }
    else {
      this.getBasicStatisticsInfo(this.$route.query.row);
    }
  },
  beforeDestroy() {
    this.phoneRecordData = null;
  },
};
</script>
<style scoped>
.full-item>>>.ivu-form-item-content {
  margin-left: 80px;
}

.full-item-facecontent>>>.ivu-form-item-content {
  margin-left: 138px;
}

.pic-span {
  color: #ff4722;
  border-bottom: 1px solid #ff4722;
  margin-right: 10px;
}

.his-box {
  background: #f4f4f4;
  padding: 10px;
  margin-top: 20px;
}

.crl {
  width: 4px;
  height: 4px;
  background: #ff4722;
  border-radius: 50%;
}

.text-title {
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #1d1d1d;
}

.header1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.line1 {
  display: inline-block;
  width: 4px;
  height: 20px;
  background: #ff4722;
}

.title {
  text-align: center;
  font-size: 18px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #101010;
  margin-left: 15px;
  line-height: 18px;
}

.tab-item {
  width: 54px;
  height: 26px;
  margin-left: 10px;
  border-radius: 2px;
  display: inline-block;
  text-align: center;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  line-height: 26px;
}

.form-self>>>.ivu-form-item {
  margin-bottom: 0 !important;
}

.cb-group>label {
  margin: 5px;
}

.border-div {
  border: 1px solid #eeeeee;
}
</style>
<style scoped lang="less">
.assignment-header {
  color: rgba(24, 144, 255, 1);
  margin: 5px 0;
  font-size: 16px;
  font-weight: 600;
}

.mr20 {
  margin-right: 20px;
}

@import "./index";
</style>

<style>
.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}

@keyframes ani-demo-spin {
  from {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.ivu-input-group-prepend {
  background-color: #fff;
}
</style>
